<template>
  <div class="page-sty">
    <div class="pagination">
      <i-button @click="prevPage" :disabled="currentPage === 1">{{ $t('promote.previous_page') }}</i-button>
      <i-input v-model="internalCurrentPage" @on-keyup.enter="goToPage"></i-input>
      <i-button @click="nextPage" :disabled="currentPage === totalPages">{{ $t('promote.next_page') }}</i-button>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    totalPages: {
      type: Number,
      required: true
    },
    currentPage: {
      type: Number,
      required: true
    },
  },
  data() {
    return {
      internalCurrentPage: this.currentPage,
    }
  },
  watch: {
    currentPage(newValue) {
      this.internalCurrentPage = newValue;
    }
  },
  methods: {
    // 上一页
    prevPage() {
      if (this.currentPage > 1) {
        this.internalCurrentPage--;
        this.$emit('specifyMet', this.internalCurrentPage);
      }
    },
    // 下一页
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.internalCurrentPage++;
        this.$emit('specifyMet', this.internalCurrentPage);
      }
    },
    // 指定跳转页面
    goToPage() {
      if (this.internalCurrentPage && this.internalCurrentPage >= 1 && this.internalCurrentPage <= this.totalPages) {
        this.$emit('specifyMet', this.internalCurrentPage);
      }
    }
  }
}
</script>

<style lang="less" scoped>
.page-sty {
  display: flex;
  justify-content: end;
  margin-top: 48px;
  margin-right: 56px;

  .pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 200px;

    :deep(.ivu-input) {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>